<template>
  <div>
    <a-card class="card" :bordered="false">
      <a-form :form="form" class="form" @submit="handleSubmit">
        <a-divider orientation="left">病人个人信息：</a-divider>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="姓名">
              <a-input
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  {rules: [{ required: true, message: '请输入姓名', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="证件类型">
              <a-select placeholder="请选择证件类型" v-decorator="[ 'carType', {rules: [{ required: true, message: '请选择证件类型'}]} ]">
                <a-select-option v-for="c in carTypeList" :key="c.key">{{ c.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="证件号">
              <a-input
                placeholder="请输入证件号"
                v-decorator="[
                  'carId',
                  {rules: [{ required: true, message: '请输入证件号', whitespace: true},{pattern : /[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]/, message: '输入正确的身份证号'}]}
                ]" >
                <a-tooltip v-if="this.form.getFieldValue('carType') == 1" slot="suffix" title="如果身份证最后一位X,请使用英文字母 X">
                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                </a-tooltip>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="年龄">
              <a-input
                placeholder="请输入年龄"
                v-decorator="[
                  'age',
                  {rules: [{ required: true, message: '请输入年龄', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="性别">
              <a-select placeholder="请选择性别" v-decorator="[ 'gender', {rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option value="0">男</a-select-option>
                <a-select-option value="1">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="入院时间">
              <a-date-picker
                v-decorator="[ 'comeDate', {rules: [{ required: true, message: '请选择日期'}]} ]"
              >
              </a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="电话号码">
              <a-input
                placeholder="请输入电话号码"
                v-decorator="[
                  'phone',
                  {rules: [{ required: true, message: '请输入电话号码', whitespace: true},{ pattern : /[1][3,4,5,7,8][0-9]{9}/,message: '请输入正确的电话号码' }]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="紧急联系人">
              <a-input
                placeholder="紧急联系人"
                v-decorator="[
                  'contact',
                  {rules: [{ required: true, message: '请输入证件号', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="紧急联系人电话号码">
              <a-input
                placeholder="紧急联系人电话号码"
                v-decorator="[
                  'emergency',
                  {rules: [{ required: true, message: '紧急联系人电话号码', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">医疗信息：</a-divider>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="状态">
              <a-select placeholder="状态" v-decorator="[ 'state', {rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option value="0">住院</a-select-option>
                <a-select-option value="1">出院</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="部门">
              <a-select placeholder="部门" @select="nurse" v-decorator="[ 'department', {rules: [{ required: true, message: '请选择部门'}]} ]">
                <a-select-option v-for="d in departmentList" :key="d.key">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="护士人员">
              <a-select
                placeholder="护士人员"
                v-decorator="[
                  'nurse',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]"
              >
                <a-select-option v-for="n in nurseList" :key="n.id.toString()">
                  {{ n.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="是否城乡医保：">
              <a-select placeholder="是否城乡医保" v-decorator="[ 'insurance', {rules: [{ required: true, message: '请选择选项'}]} ]">
                <a-select-option value="0">是</a-select-option>
                <a-select-option value="1">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="是否异地就医：">
              <a-select placeholder="是否异地就医" v-decorator="[ 'allocate', {rules: [{ required: true, message: '请选择选项'}]} ]">
                <a-select-option value="0">是</a-select-option>
                <a-select-option value="1">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="主治医师">
              <a-select placeholder="主治医生" v-decorator="[ 'doctor', {rules: [{ required: true, message: '请选择医生'}]} ]">
                <!--                <a-select-option v-for="d in doctorList" :key="d.id">{{ d.name }}</a-select-option>-->
                <a-select-option v-for="d in doctorName" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
              <!--              <a-input-->
              <!--                placeholder="主治医师"-->
              <!--                v-decorator="[-->
              <!--                  'doctor',-->
              <!--                  {rules: [{ required: true, message: '请输入主治医师', whitespace: true}]}-->
              <!--                ]" />-->
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="病房">
              <!-- <a-input
                placeholder="病房"
                v-decorator="[
                  'bed',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]" /> -->
              <a-select
                placeholder="请选择病房"
                @select="select"
                showSearch
                v-decorator="[
                  'ward',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]"
              >
                <a-select-option v-for="w in wardDoctor" :key="w.number.toString()">
                  {{ w.number }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="床位号">
              <!-- <a-input
                placeholder="床位号"
                v-decorator="[
                  'bed',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]" /> -->
              <a-select
                placeholder="请选择床位"
                v-decorator="[
                  'bed',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]"
              >
                <a-select-option v-for="bed in bedList" :key="bed.bedNumber.toString()">
                  {{ bedFilter(bed.bedNumber, bed.patientName) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="备注">
              <a-textarea
                v-decorator="['remarks']"
                placeholder="备注"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" @click="handleSubmit(e)">提交</a-button>
          <a-button style="margin-left: 8px" @click="goBack()">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { addPatient } from '@/api/patient'
import { carTypeList, departmentList } from '@/dictionary'
import { getWard, getBedPatientList, getWardByDoctor } from '../../api/ward'
import { getDoctor, getByName } from '../../api/doctor'
import { getNurseByDepartment } from '../../api/nurse'
export default {
  name: 'AddPatient',
  data () {
    return {
      carTypeList,
      departmentList,
      wardList: null,
      wardDoctor: null,
      doctorName: null,
      bedList: null,
      nurseList: null,
      user: this.$store.getters.userInfo,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values)
          const ndata = this.form.getFieldsValue(['name', 'carType', 'carId', 'gender', 'age',
            'phone', 'contact', 'emergency', 'state', 'department', 'doctor', 'comeDate', 'ward', 'bed',
            'remarks', 'insurance', 'allocate', 'nurse'])
          const data = { ...ndata, inDate: new Date(), outDate: null, id: null }
          console.log('handelData', data)
          addPatient(data).then(res => {
            this.$router.push('/patient/index')
            setTimeout(() => {
              this.$notification.success({
                message: '添加成功',
                description: '已成功添加病人'
              })
            }, 1000)
          }).catch(err => {
            console.log('res', err)
            this.$notification['error']({
              message: '错误',
              description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
              duration: 4
            })
          })
        }
      })
    },
    select (value, option) {
      console.log('value', value)
      getBedPatientList(value).then(res => {
        this.bedList = res.result
        console.log(this.bedList)
      })
    },
    nurse (value, option) {
      console.log('value', value)
      getNurseByDepartment(value).then(res => {
        console.log(res.result)
        this.nurseList = res.result
      })
    },
    bedFilter (bed, name) {
      if (name === null) {
        return bed + '号床'
      } else {
        return bed + '号床 (' + name + ')'
      }
    },
    goBack () {
      this.$router.push('/patient/index')
    },
    onChange (date, dateString) {
      console.log(date, dateString)
    },
    info () {
      this.$message.info('如居民身份证号码末位为 X ，则使用大写英文字母 X 表示！', 5)
    }
  },
  created () {
    getWard().then(res => {
      this.wardList = res.result
    }).catch(err => {
      console.log('err', err)
    })
    getWardByDoctor(this.user.name).then(res => {
      this.wardDoctor = res.result
    }).catch(err => {
      console.log('err', err)
    })
    getDoctor().then(res => {
      this.doctorList = res.result
    }).catch(err => {
      console.log('err', err)
    })
    getByName(this.user.name).then(res => {
      this.doctorName = res.result
    }).catch(err => {
      console.log('err', err)
    })
  }
}
</script>
